<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        .inner{
            height: 200px;
            width: 400px;
            background-color: blanchedalmond;
        }
        .inner2{
            height: 200px;
            width: 400px;
            background-color: rebeccapurple;
        }
        .inner3{
            height: 200px;
            width: 400px;
            background-color: lightblue;
        }
        .inner4{
            height: 200px;
            width: 400px;
            background-color: yellow;
        }
        .inner5{
            height: 200px;
            width: 400px;
            background-color: red;
        }
        .inner6{
            height: 100px;
            width:200px;
            background-color: gold;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="inner" @click="divhandler">
        <input type="button" value="按钮" @click="btnhandler" >
        <br/>
        <!-- 使用.stop阻止冒泡-->
        <input type="button" value="按钮2（使用了修饰符stop）" @click.stop="btnhandler2" >
        <br/>
        <!-- 使用.prevent阻止默认行为 .这里是阻止a标签默认跳转的行为，还有阻止表单的submit行为 都可以用他阻止-->
        <br/>
        <a href="http://www.baidu.com" @click.prevent="linkClick">有问题去百度</a>
    </div>

    <!-- 默认的事件处理顺序是冒泡顺序，即先里层处理，后外层处理-->
    <!-- 使用,capture写在外层div元素的click事件上，使用事件机制变为捕获触发事件的机制。即先外层处理，在里层处理-->
    <div class="inner2" @click.capture="divhandler">
        <input type="button" value="按钮" @click="btnhandler" >
    </div>
    <!-- .self只有点击自己才触发自身的点击事件 ，其他的什么捕获，冒泡机制都不使用-->
    <div class="inner3" @click.self="divhandler">
        <input type="button" value="按钮" @click="btnhandler" >
    </div>
    <!-- once表示 事件只处理一次，写在那个元素的属性里面，那这个元素的事件只触发一次，不影响他的父子元素-->
    <!-- 修饰符可以连着使用，顺序没关系，-->
    <div class="inner4" @click.once="divhandler">
        <input type="button" value="按钮" @click.once="btnhandler" >
    </div>
    <!-- stop 和self的区别，stop把事件在自己这一层就杀掉了，相当于安卓的消费掉了。不再继续往上汇报-->
    <!-- stop 和self的区别，self只是把事件在自己这一层屏蔽，自己不处理，把事件透传到上一层-->

    <div class="inner5" @click="divhandler5">
        <div class="inner6" @click.stop = divhandler6>
            <input type="button" value="按钮" @click="btnhandler" >
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"这是一个按钮"
        },
        methods:{
            divhandler(){
                console.log("div的事件处理")
            },
            btnhandler(){
                console.log("btn的事件处理")
            },
            btnhandler2(){
                console.log("btn的事件处理")
            },
            linkClick(){
                console.log("点击了连接了")
            },
            divhandler5(){
                console.log("inner5的事件处理")
            },
            divhandler6(){
                console.log("inner6的事件处理")
            },
        }
    })


</script>
</body>
</html>
